// import Home from '../pages/Home'
const Home = () => import('../pages/Home')

// import Search from '../pages/Search'
const Search = () => import('../pages/Search')





import Login from '../pages/Login'
import Register from '../pages/Register'

import Detail from '@/pages/Detail'
import AddCartSuccess from '@/pages/AddCartSuccess'
import ShopCart from '@/pages/ShopCart'
import Trade from '@/pages/Trade'
import Pay from '@/pages/Pay'
import PaySuccess from '@/pages/PaySuccess'
import Center from '@/pages/Center'
import MyOrder from '@/pages/Center/MyOrder'
import GroupOrder from '@/pages/Center/GroupOrder'


// import XXX from './xxx'  叫同步引入，也叫静态引入，它不能动态引入
// 想用的时候在引入是不行的
// 同步引入必须是放在文件最上面，一上来所有的都已经引入了
// webpack在打包的时候会把所有的引入的组件统统打包，打包成一个大的文件
// 这个打包的文件越大，浏览器在加载的时候越费尽，效率会越低
// 因此，我们以后生产阶段路由组件在引入的时候都不用使用这种方式同步引入
// 而是要利用动态引入


// import('./xxx') 叫动态引入，如果我们使用这个引入方式，那么
// webpack在看到我们使用动态引入方式，会把动态引入的所有组件，单独进行打包
// 每个路由组件都会单独打包成一个小的文件
// 小的文件浏览器不会立即去加载，而是当我们访问对应的某个路由界面的时候
// 才会加载对应的小文件
// 打包的主文件变小，浏览器加载速度会快








export default [
  {
    path: '/center',
    component: Center,
    children:[
      {
        path:'myorder',
        component:MyOrder
      },
      {
        path:'grouporder',
        component:GroupOrder
      },
      {
        path:'',
        redirect:'myorder'
      }
    ]
  },
  {
    path: '/paysuccess',
    component: PaySuccess,
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      if(from.path === '/pay'){
        next()
      }else{
        next(false)
      }
    }
  },
  {
    path: '/pay',
    component: Pay,
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      if(from.path === '/trade'){
        next()
      }else{
        next(false)
      }
    }
  },
  {
    path: '/trade',
    component: Trade,
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      if(from.path === '/shopCart'){
        next()
      }else{
        next(false)
      }
    }
  },
  {
    name:'home',
    path: '/home',
    component: Home,
    meta: {
      isShowTypeNav:true
    }
  },
  {
    name:'login',
    path: '/login',
    component: Login,
    meta: {
      isHiddenFooter:true
    }
  },
  {
    name:'register',
    path: '/register',
    component: Register,
    meta: {
      isHiddenFooter:true
    }  // 这是一个用来存储额外数据的一个属性，可以通过这个属性做一些差异化的操作
  },
  {
    name:'detail',
    path: '/detail/:id',  // params参数携带的时候，这个路由中要添加占位符
    component: Detail,
    props:true  // props+params参数 在对应的组件中直接使用props来接收，不用计算属性了
  },
  {
    name: 'addcartsuccess',
    path: '/addCartSuccess',
    component:AddCartSuccess,
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      let skuNum = to.query.skuNum
      let skuInfo = sessionStorage.getItem('skuInfo_key')
      if(skuNum && skuInfo){
        next()
      }else{
        next('/')
      }
    }
  },
  {
    name: 'shopcart',
    path: '/shopCart',
    component:ShopCart,
  },
  {
    name:'search', // 路由名称
    path: '/search/:keyword?',
    component: Search,
    // props配置是简化操作传递过去的路由参数
    // 三种
    // 布尔
    // props:true,  会把路由传递的params参数映射为组件内部的属性
    // 对象
    // props:{username:'赵丽颖'} 会把对象内部的属性映射为组件内部的属性，一般用来传递一个额外的数据
    // 函数
    // 可以手动的去映射params或者query参数。
    // props(route){
    //   return {keyword:route.params.keyword,category1Id:route.query.category1Id}
    // }
  },
  
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/communication',
    component: () => import('@/pages/Communication/Communication'),
    children: [
      {
        path: 'event',
        component: () => import('@/pages/Communication/EventTest/EventTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'model',
        component: () => import('@/pages/Communication/ModelTest/ModelTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'sync',
        component: () => import('@/pages/Communication/SyncTest/SyncTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'attrs-listeners',
        component: () => import('@/pages/Communication/AttrsListenersTest/AttrsListenersTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'children-parent',
        component: () => import('@/pages/Communication/ChildrenParentTest/ChildrenParentTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'scope-slot',
        component: () => import('@/pages/Communication/ScopeSlotTest/ScopeSlotTest'),
        meta: {
          isHideFooter: true
        },
      }
    ],
  },
]